<template>
    <div class='all'>
      <!-- 头部 -->
        <div class='header'>
            <div class="head">
                <div class='header-wrap'>
                    <div class='wrap-left'>
                        <i class='icon-dingxiang'></i>
                        <span class='cityName'>南阳</span>
                        <button class='changeCity'><a>更换城市</a></button>
                        <div class="user-entry">
                            <a href="#" class='user-up'>立即登录</a>
                            <a href="#" class='extra-entry'>注册</a>
                        </div>
                        <div class='listed'>
                          <a href="#" class='user-up'>李典</a>
                          <a href="#" class='extra-entry'>退出</a>
                        </div>
                    </div>
                    <div class='wrap-right'>
                        <ul class='right-ul'>
                            <li><router-link to="/cate">美食</router-link>  |</li>
                            <li>
                              <router-link to="/hotel">酒店</router-link> 
                              |</li>
                            <li>出行 |</li>
                            <li>娱乐 |</li>
                            <li>生活 |</li>
                            <li>购物</li> 
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class='header-banner'>
                <img src="../../assets/ld/img/banner.png" class='back'>
                <div class='logo'>
                    <p class='shop'>逛逛商铺</p>
                    <p>寻找你想要的商铺</p>
                </div>
                <div class='wow'>
                    <button>预约店铺</button>
                </div>
            </div>
        </div>
        <!-- 搜索店铺 -->
        <div class="con">
          <div class='con-wrap'>
            <div class="from-wrap">
              <form action="">
                <el-input v-model="input" placeholder="请输入店铺类型" class='slot'></el-input>
                <el-button type="primary">查询</el-button>
              </form>
            </div>
          </div>
        </div>
        <!-- 轮播图 -->
        <Slideshow></Slideshow>
        <!-- 店铺 -->
       <Center></Center>
       <Center></Center>
       <!-- 底部联系我们 -->
       <div class="part">
         <div class="contact">
           <div class="com-title">
             <p class="com-wow">联系客服了解更多内容</p>
           </div>
           <div class="com-main">
             <div class="container">
               <div class="from-com">
                 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                   <p class="row">现在预约店铺 立马为你提供服务</p>
                    <el-form-item label="姓名" prop="name" class='tip'>
                      <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺类型" prop="region" class='tip'>
                      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="desc" class='tip'>
                      <el-input type="text" v-model="ruleForm.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')">立即预约</el-button>
                    </el-form-item>
                    <div class="text-grey">
                      <div>简单三步便可预约</div>
                      <div>确认店铺类型--开通定位--开启你的预约</div>
                    </div>
                  </el-form>
                 <div class="bet">
                   <div class="l"><span>400-800-8888</span></div>
                   <div class="r">
                     周一至周五 9:00-22:00<br>
                     周六至周日 9:00-18:00
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
</template>

<script>
import Center from './M-center.vue'
import Slideshow from './M-slideshow.vue'
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    components:{
      Center,
      Slideshow
    },
    data() {
      return {
        input:'',
        shops:[
          {img:'',name:'美折促销',appe:'真不错'},
          {img:'',name:'超级店长',appe:'真不错'},
          {img:'',name:'优惠券',appe:'真不错'},
          {img:'',name:'爱用交易',appe:'真不错'},
        ],
        stores:[
          {title:'6.欢乐逛打折',desc:'促销'},
          {title:'7.爱用商品',desc:'促销'},
          {title:'8.快递助手',desc:'促销'},
          {title:'9.打包配',desc:'促销'},
          
        ],
        // 咨询的表单
        ruleForm: {
          name: '',
          region: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择店铺类型', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '联系方式', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .all{
      margin: 0 auto;
      width: 100%;
  }
  /* 头部· */
  .header{
      width: 100%;
  }
  .head{
      /* width: 100%; */
      background-color: #F8F8F8;
      margin: 0 auto;
  }
  .header-wrap{
      margin: 0 auto;
      height: 48px;
      width: 94%;
      display: flex;
      line-height: 48px;
      justify-content: space-between;
  }
  .wrap-left i{
      font-size: 20px;
      color: red;
  }
  .cityName{
    color:#666;
    font-size: 14px;
    cursor: pointer;
  }
  .changeCity{
    outline: none;
    border: 1px solid #E5E5E5;
    border-radius: 2px;
    background: transparent;
    margin: 0 4px;
    padding: 0 2px;
    cursor: pointer;
  }
  .changeCity a{
    text-decoration: none;
    color: #666;
    font-size: 14px;
    cursor: pointer;
  }
  .changeCity a:hover{
    color:#007bff;
  }
  .user-entry{
    display: inline-block;
    margin-left: 15px;
  }
  .user-entry a,.listed a{
    text-decoration: none;
    font-size: 14px; 
    cursor: pointer;
  }
  .user-up{
    color:#007bff;
    margin-right: 10px;
  }
  .extra-entry{
    color: #666;
  }
  .listed{
    display: none;
    margin-left: 15px;
  }
  /* .wrap-right{
      
  } */
  .right-ul{
      display: flex;
      list-style: none;
  }
  .right-ul li{
      padding-right: 15px;
      color: #666;
  }
  .right-ul li:hover{
    color:#007bff;
    cursor: pointer;
  }
  .right-ul li a{
    text-decoration: none;
    color:#666;
  }
  .header-banner{
      margin: 0 auto;
      height: 420px;
      position: relative;
  }
  .back{
      width: 100%;
      height: 100%;
  } 
  .logo{
      position: absolute;
      left: 10%;
      top: 40%;
  }
  .shop{
      color:#666;
      margin-bottom: 15px;
  }
  .logo p{
      letter-spacing: 6px;
      font-size: 36px;
      font-weight: bolder;
  }
  .wow{
      position: absolute;
      left: 13%;
      top: 70%;
  }
  .wow button{
      color: white;
      font-size: 20px;
      padding: 5px 50px;
      background-color: #007bff;
      border: 1px solid #007bff;
      outline: none;
      cursor: pointer;
  }
  /* 搜索店铺 */
  .con{
    /* margin: 0 auto; */
    width: 100%;
    background-color:#fafbfd ;
  }
  .con-wrap{
    margin: 0 auto;
    padding-right: 15px;
    padding-left: 15px;
  }
  .from-wrap{
    text-align: center;
    margin: 0 auto;
    padding: 40px 0;
  }
  .slot{
    width: 30%;
    margin-right: 20px;
  }



  /* 底部的联系我们 */
  .part{
    width: 100%;
    text-align: center;
  }
  .contact{
    margin: 0 auto;
  }
  .com-title{
    width: 100%;
  }
  .com-wow{
    text-align: center;
    font-size: 34px;
    font-family: "FZLTZHJW";
  }
  /* 主要表单的内容 */
  .com-main{
    height: 500px;
    margin-top: 110px;
    background-image: url('../../assets/ld/img/bg-contact.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .container{
    display: flex;
    position: relative;
  }
  .from-com{
      position:absolute;
      right: 60px;
      width: 425px;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #ddd;
      -webkit-transform: translateY(-40px);
      -ms-transform: translateY(-40px);
      transform: translateY(-40px);
  }
  .demo-ruleForm{
        padding: 30px 30px 20px;
  }
  .row{
      color: #333;
      font-size: 25px;
      font-weight: bold;
      margin-bottom: 20px
  }
  .tip{
    margin-bottom: 20px;
    display: flex;
    text-align: justify;
  }
  .text-grey{
    color: grey;
  }
  .text-grey div{
    margin-bottom:8px;
  }
  .bet{
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      padding: 10px;
      font-size: 12px;
      color: #999;
      border-top: 1px solid #ddd;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
</style>
